<template>
  <view class="review-page">
    <!-- 服务信息 -->
    <view class="service-info">
      <image :src="orderDetail.service.image" mode="aspectFill" class="service-info__image" />
      <view class="service-info__content">
        <text class="service-info__title">{{ orderDetail.service.title }}</text>
        <text class="service-info__option">{{ orderDetail.service.option }}</text>
      </view>
    </view>
    
    <!-- 评分 -->
    <view class="review-section">
      <view class="review-section__title">服务评分</view>
      <view class="review-stars">
        <view 
          v-for="n in 5" 
          :key="n" 
          class="review-star"
          :class="{'review-star--active': n <= rating}"
          @click="setRating(n)"
        >
          <text>★</text>
        </view>
      </view>
      <view class="review-rating-text">{{ getRatingText() }}</view>
    </view>
    
    <!-- 评价内容 -->
    <view class="review-section">
      <view class="review-section__title">评价内容</view>
      <textarea 
        class="review-textarea" 
        v-model="content"
        placeholder="请输入您对服务的评价，帮助我们改进服务质量~"
        maxlength="200"
      ></textarea>
      <view class="review-textarea-counter">{{ content.length }}/200</view>
    </view>
    
    <!-- 上传图片 -->
    <view class="review-section">
      <view class="review-section__title">
        <text>上传图片</text>
        <text class="review-section__subtitle">（选填，最多3张）</text>
      </view>
      <view class="review-images">
        <view 
          v-for="(image, index) in images" 
          :key="index"
          class="review-image-item"
        >
          <image :src="image" mode="aspectFill" class="review-image" />
          <view class="review-image-delete" @click="deleteImage(index)">×</view>
        </view>
        <view 
          v-if="images.length < 3" 
          class="review-image-add"
          @click="addImage"
        >
          <text class="review-image-add__icon">+</text>
          <text class="review-image-add__text">上传图片</text>
        </view>
      </view>
    </view>
    
    <!-- 服务选项标签 -->
    <view class="review-section">
      <view class="review-section__title">服务标签</view>
      <view class="review-tags">
        <view 
          v-for="(tag, index) in tags" 
          :key="index"
          class="review-tag"
          :class="{'review-tag--active': tag.selected}"
          @click="toggleTag(index)"
        >
          {{ tag.text }}
        </view>
      </view>
    </view>
    
    <!-- 匿名评价 -->
    <view class="review-anonymity">
      <text>匿名评价</text>
      <switch 
        color="#07c160"
        :checked="anonymous"
        @change="toggleAnonymous"
      />
    </view>
    
    <!-- 底部提交按钮 -->
    <view class="review-submit">
      <button 
        class="review-submit__btn"
        :disabled="submitDisabled"
        :class="{'review-submit__btn--disabled': submitDisabled}"
        @click="submitReview"
      >
        提交评价
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 订单信息
const orderDetail = ref({
  id: 0,
  service: {
    id: 0,
    title: '加载中...',
    option: '',
    image: 'https://picsum.photos/seed/loading/300/200'
  }
});

// 评分
const rating = ref(5);

// 评价内容
const content = ref('');

// 上传的图片
const images = ref([]);

// 服务标签
const tags = ref([
  { text: '服务态度好', selected: false },
  { text: '上门速度快', selected: false },
  { text: '服务质量高', selected: false },
  { text: '专业技能强', selected: false },
  { text: '沟通很顺畅', selected: false },
  { text: '配送很准时', selected: false }
]);

// 是否匿名评价
const anonymous = ref(false);

// 提交按钮是否禁用
const submitDisabled = computed(() => {
  return rating.value === 0 || content.value.trim() === '';
});

// 设置评分
const setRating = (value) => {
  rating.value = value;
};

// 获取评分文本
const getRatingText = () => {
  const texts = ['很差', '一般', '还行', '不错', '很好'];
  return texts[rating.value - 1] || '请评分';
};

// 添加图片
const addImage = () => {
  if (images.value.length >= 3) {
    uni.showToast({
      title: '最多上传3张图片',
      icon: 'none'
    });
    return;
  }
  
  uni.chooseImage({
    count: 1,
    success: (res) => {
      images.value.push(res.tempFilePaths[0]);
    }
  });
};

// 删除图片
const deleteImage = (index) => {
  images.value.splice(index, 1);
};

// 切换标签
const toggleTag = (index) => {
  tags.value[index].selected = !tags.value[index].selected;
};

// 切换匿名
const toggleAnonymous = (e) => {
  anonymous.value = e.detail.value;
};

// 提交评价
const submitReview = () => {
  if (submitDisabled.value) {
    return;
  }
  
  // 收集表单数据
  const selectedTags = tags.value
    .filter(tag => tag.selected)
    .map(tag => tag.text);
  
  const reviewData = {
    orderId: orderDetail.value.id,
    serviceId: orderDetail.value.service.id,
    rating: rating.value,
    content: content.value,
    images: images.value,
    tags: selectedTags,
    anonymous: anonymous.value
  };
  
  console.log('提交评价数据:', reviewData);
  
  // 显示提交中
  uni.showLoading({
    title: '提交中...'
  });
  
  // 模拟提交过程
  setTimeout(() => {
    uni.hideLoading();
    
    // 提交成功
    uni.showToast({
      title: '评价成功',
      icon: 'success'
    });
    
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
};

// 页面加载
onMounted(() => {
  // 获取URL参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  
  if (options && options.orderId) {
    console.log('评价订单ID:', options.orderId);
    // 获取订单详情
    fetchOrderDetail(options.orderId);
  } else {
    uni.showToast({
      title: '订单信息不存在',
      icon: 'none'
    });
    
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});

// 获取订单详情
const fetchOrderDetail = (orderId) => {
  // 模拟API请求
  setTimeout(() => {
    // 根据订单ID获取不同订单
    if (orderId === '1001') {
      orderDetail.value = {
        id: 1001,
        service: {
          id: 1,
          title: '快递代拿服务',
          option: '普通件 (2kg以内)',
          image: 'https://picsum.photos/seed/service1/300/200'
        }
      };
    } else if (orderId === '1003') {
      orderDetail.value = {
        id: 1003,
        service: {
          id: 3,
          title: '刷乐跑跑腿服务',
          option: '2公里以内',
          image: 'https://picsum.photos/seed/service3/300/200'
        }
      };
    } else {
      // 默认示例数据
      orderDetail.value = {
        id: parseInt(orderId),
        service: {
          id: 2,
          title: '服务评价示例',
          option: '标准服务',
          image: 'https://picsum.photos/seed/default/300/200'
        }
      };
    }
  }, 500);
};
</script>

<style lang="scss" scoped>
.review-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 80px;
}

.service-info {
  display: flex;
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  
  &__image {
    width: 70px;
    height: 70px;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  &__title {
    font-size: 15px;
    color: #333;
    margin-bottom: 5px;
  }
  
  &__option {
    font-size: 13px;
    color: #999;
  }
}

.review-section {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  
  &__title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
  }
  
  &__subtitle {
    font-size: 13px;
    font-weight: normal;
    color: #999;
    margin-left: 5px;
  }
}

.review-stars {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.review-star {
  font-size: 30px;
  color: #e0e0e0;
  margin: 0 5px;
  
  &--active {
    color: #ff9800;
  }
}

.review-rating-text {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.review-textarea {
  width: 100%;
  height: 120px;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

.review-textarea-counter {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
}

.review-image-item {
  width: 80px;
  height: 80px;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

.review-image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.review-image-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-image-add {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  &__icon {
    font-size: 24px;
    color: #999;
    margin-bottom: 5px;
  }
  
  &__text {
    font-size: 12px;
    color: #999;
  }
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
}

.review-tag {
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  font-size: 13px;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 16px;
  margin-right: 10px;
  margin-bottom: 10px;
  
  &--active {
    background-color: #e6f7ef;
    color: #07c160;
  }
}

.review-anonymity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #333;
}

.review-submit {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 15px;
  background-color: #ffffff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  &__btn {
    height: 44px;
    line-height: 44px;
    background-color: #07c160;
    color: #ffffff;
    font-size: 16px;
    border-radius: 22px;
    
    &--disabled {
      background-color: #cccccc;
    }
  }
}
</style>
